<template>
  <div class="home">
    <loading :show="loadingshow" text="正在提交..."></loading>
    <alert v-model="alertShow" title="错误" :content="errMsg"></alert>
    <toast v-model="toastShow" text="提交成功" position="middle"></toast>
    <div class="header">
      <div class="logo">
        <img src="../../assets/img/home/logo.png" alt="">
      </div>
      <div class="title">
        <img src="../../assets/img/home/nongye-title_03.png" alt="">
      </div>
    </div>

    <div class="form-group">
      <group title="请输入信息">
        <x-input title="姓名" placeholder="请输入姓名" v-model="formData.user_name"></x-input>
        <x-input title="电话" placeholder="请输入电话" v-model="formData.user_mobile"></x-input>
        <x-input title="项目" placeholder="请输入项目名称" v-model="formData.product_name"></x-input>
        <x-input title="数量" placeholder="请输入数量" v-model="formData.count">
          <span slot="right">吨</span>
        </x-input>
        <x-input title="公司" placeholder="请输入公司名称" v-model="formData.company"></x-input>
        <x-input title="地址" placeholder="请输入地址" v-model="formData.address"></x-input>
        <div class="btn-group">
          <x-button type="primary" @click.native="handleSubmit" text="提交信息"></x-button>
        </div>

      </group>
    </div>


  </div>
</template>

<script>
  import { XInput, Group, XTextarea, XButton, Loading, Toast, Alert } from 'vux'
  import { postProjects } from '@/api/projects'

  export default {
    components: {
      XInput,
      Group,
      XTextarea,
      XButton,
      Loading,
      Toast,
      Alert
    },
    data () {
      return {
        formData: {},
        loadingshow: false,
        alertShow: false,
        toastShow: false,
        errMsg: '所有内容不能为空！'
      }
    },
    methods: {
      handleSubmit () {
        if (this.valiFormData(this.formData)) {
          var reg = /^(\+86|0086)?\s*1[34578]\d{9}$/ig
          if (reg.test(this.formData.user_mobile)) {
            this.loadingshow = true
            this.formData.category = 'nz'
            postProjects(this.formData).then((res) => {
              this.loadingshow = false
              this.toastShow = true
              this.formData = {}
              console.log('res: ', res)
            })
          } else {
            this.errMsg = '请输入正确格式的手机号码！'
            this.alertShow = true
          }
        } else {
          this.alertShow = true
        }
      },
      valiFormData (data) {
        if (data.user_name &&
          data.user_mobile &&
          data.address &&
          data.product_name &&
          data.company &&
          data.count) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style>

</style>

